<template>
  <Modal
      :show="show"
      title="添加"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <ModalForm ref="form"></ModalForm>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "MenuModal"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue"
import Modal from '@/components/Modal.vue'
import ModalForm from '@/components/ModalForm.vue'
import {ModalFormInitType, ModalFormTreeOption} from '@/type/ModalFormType'
import {ums_menu_parentList, ums_menu_save, ums_menu_update} from '@/api/ums'
import useMsg from '@/hooks/useMsg'
import {processTreeNode} from '@/utils'
import {UmsMenuReq} from '@/type/ums'
import {RowData} from '@/view/system/menu/MenuType'

const show = ref<boolean>(false)

const emit = defineEmits<{
  (e: "list"): void
}>()

const type = ref<0|1>(0)

const {success, error} = useMsg()

const formData = ref<RowData|null>(null)

const form = ref<{
  init: (data: ModalFormInitType[]) => void
  validate: () => Promise<UmsMenuReq>
}>()

const handleOk = () => {
  form.value?.validate().then(data => {
    if (type.value === 0) {
      ums_menu_save( data ).then( res => {
        if (res.code === 200) {
          success( res.message )
          show.value = false
          emit( "list" )
        } else {
          error( res.message )
        }
      })
    }else {
      const obj = {
        ...formData.value,
        ...data
      } as RowData
      ums_menu_update(obj).then(res => {
        if (res.code === 200) {
          success( res.message )
          show.value = false
          emit( "list" )
        } else {
          error( res.message )
        }
      })
    }
  })
}

const handleCancel = () => {
  show.value = false
}

function init (data?: RowData) {
  parentList().then((res) => {
    show.value = true
    nextTick(() => {
      if (data){
        type.value = 1
        formData.value = data
      }else {
        type.value = 0
      }
      form.value?.init([
        {
          label: "上级目录",
          type: 'tree',
          key: "parent_id",
          value: data?.parent_id || "0",
          rules: {
            required: true,
            trigger: "change",
            message: "请选择菜单名称"
          },
          treeOptions: res
        },
        {
          label: "菜单名称",
          type: "input",
          key: "menu_name",
          value: data?.menu_name || "",
          rules: {
            required: true,
            trigger: "change",
            message: "请输入菜单名称"
          }
        },
        {
          label: "组件路径",
          type: "input",
          key: "path",
          value: data?.menu_path || "",
          rules: {
            required: true,
            trigger: "change",
            message: "请输入菜单路径"
          }
        },
        {
          label: "菜单路径",
          type: "input",
          key: "url",
          value: data?.menu_url || "",
          rules: {
            required: true,
            trigger: "change",
            message: "请输入菜单路径"
          }
        },
        {
          label: "排序",
          type: "number",
          key: "order",
          value: data?.menu_order || 0,
          rules:{
            type: "number",
            required: true,
            trigger: "change",
            message: "请输入排序数字"
          }
        },
        {
          label: "菜单类型",
          type: "radio",
          key: "menu_type",
          value: data?.menu_type || '',
          rules: {
            required: true,
            trigger: "change",
            message: "请选择菜单类型"
          },
          options: [
            {
              label: "目录",
              value: "0"
            },
            {
              label: "菜单",
              value: "1"
            },
            {
              label: "按钮",
              value: "2"
            },
          ]
        },
        {
          label: "菜单显示",
          type: "radio",
          key: "menu_hidden",
          rules: {
            required: true,
            trigger: "change",
            message: "请选择菜单是否显示"
          },
          value: data?.menu_hidden || '',
          options: [
            {
              label: "是",
              value: "1"
            },
            {
              label: "否",
              value: "0"
            }
          ]
        },
      ])
    })
  })
}

function edit () {

}

function parentList ():Promise<ModalFormTreeOption> {
  return ums_menu_parentList().then(res => {
    const modalFormTreeOptions:ModalFormTreeOption[] = [];
    res.data.forEach((node) => {
      modalFormTreeOptions.push(processTreeNode(node));
    });
    const option:ModalFormTreeOption = {
      key: "0",
      label: "主目录",
      children: modalFormTreeOptions
    }
    return option
  })
}

defineExpose({
  init,
  edit
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
